<script>
export default {
  name: "Category",
  data() {
    return {
      index: 1,
      tab: 'first',
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
    }
  }
}
</script>

<template>
  <div class="report">
    <div class="head">
      <div class="button" :class="index === 1 ? 'active' : ''" @click="index = 1">在岗员工</div>
      <div class="button" :class="index === 2 ? 'active' : ''" @click="index = 2">待岗员工</div>
    </div>
    <div class="card" style="margin-top: 16px">
      <el-tabs v-model="tab">
        <el-tab-pane label="全行" name="first">
          <div class="layout">
            <div class="item">
              <div class="title">
                <div class="text">正式员工情况</div>
                <div class="download">下载<i class="el-icon-download"></i></div>
              </div>
              <div class="grid-one">
                <div style="grid-column: 1 / 2;grid-row: 1 / 2;" class="cell label">机构分类</div>
                <div style="grid-column: 2 / 4;grid-row: 1 / 2;" class="cell label">人员分类</div>
                <div style="grid-column: 4 / 5;grid-row: 1 / 2;" class="cell label">本月人数</div>
                <div style="grid-column: 1 / 2;grid-row: 2 / 13;" class="cell label">总行</div>
                <div style="grid-column: 2 / 3;grid-row: 2 / 7;" class="cell">单列职务</div>
                <div style="grid-column: 3 / 4;grid-row: 2 / 3;" class="cell">行领导</div>
                <div style="grid-column: 3 / 4;grid-row: 3 / 4;" class="cell">行长助理</div>
                <div style="grid-column: 3 / 4;grid-row: 4 / 5;" class="cell">总裁</div>
                <div style="grid-column: 3 / 4;grid-row: 5 / 6;" class="cell">首席官</div>
                <div style="grid-column: 3 / 4;grid-row: 6 / 7;" class="cell">总监</div>
                <div style="grid-column: 4 / 5;grid-row: 2 / 3;" class="cell" data-type="value">行领导</div>
                <div style="grid-column: 4 / 5;grid-row: 3 / 4;" class="cell" data-type="value">行长助理</div>
                <div style="grid-column: 4 / 5;grid-row: 4 / 5;" class="cell" data-type="value">总裁</div>
                <div style="grid-column: 4 / 5;grid-row: 5 / 6;" class="cell" data-type="value">首席官</div>
                <div style="grid-column: 4 / 5;grid-row: 6 / 7;" class="cell" data-type="value">总监</div>
                <div style="grid-column: 2 / 3;grid-row: 7 / 9;" class="cell">管理人员</div>
                <div style="grid-column: 3 / 4;grid-row: 7 / 8;" class="cell">正职</div>
                <div style="grid-column: 3 / 4;grid-row: 8 / 9;" class="cell">副职</div>
                <div style="grid-column: 4 / 5;grid-row: 7 / 8;" class="cell" data-type="value">正职</div>
                <div style="grid-column: 4 / 5;grid-row: 8 / 9;" class="cell" data-type="value">副职</div>
                <div style="grid-column: 2 / 4;grid-row: 9 / 10;" class="cell">专业技术人员(高级经理)</div>
                <div style="grid-column: 2 / 4;grid-row: 10 / 11;" class="cell">员工</div>
                <div style="grid-column: 2 / 4;grid-row: 11 / 12;" class="cell">其他人员</div>
                <div style="grid-column: 2 / 4;grid-row: 12 / 13;" class="cell">合计</div>
                <div style="grid-column: 4 / 5;grid-row: 9 / 10;" class="cell" data-type="value">
                  专业技术人员(高级经理)
                </div>
                <div style="grid-column: 4 / 5;grid-row: 10 / 11;" class="cell" data-type="value">员工</div>
                <div style="grid-column: 4 / 5;grid-row: 11 / 12;" class="cell" data-type="value">其他人员</div>
                <div style="grid-column: 4 / 5;grid-row: 12 / 13;" class="cell" data-type="value">合计</div>
                <div style="grid-column: 1 / 2;grid-row: 13 / 17;" class="cell label">总行营业部</div>
                <div style="grid-column: 2 / 3;grid-row: 13 / 15;" class="cell">管理人员</div>
                <div style="grid-column: 3 / 4;grid-row: 13 / 14;" class="cell">正职</div>
                <div style="grid-column: 3 / 4;grid-row: 14 / 15;" class="cell">副职</div>
                <div style="grid-column: 4 / 5;grid-row: 13 / 14;" class="cell" data-type="value">正职</div>
                <div style="grid-column: 4 / 5;grid-row: 14 / 15;" class="cell" data-type="value">副职</div>
                <div style="grid-column: 2 / 4;grid-row: 15 / 16;" class="cell">营业部员工</div>
                <div style="grid-column: 2 / 4;grid-row: 16 / 17;" class="cell">合计</div>
                <div style="grid-column: 4 / 5;grid-row: 15 / 16;" class="cell" data-type="value">营业部员工</div>
                <div style="grid-column: 4 / 5;grid-row: 16 / 17;" class="cell" data-type="value">合计</div>
              </div>
            </div>
            <div class="item">
              <div class="title">
                <div class="text">派遣员工与外包员工情况</div>
                <div class="download">下载<i class="el-icon-download"></i></div>
              </div>
              <div class="grid-two">
                <div style="grid-column: 1 / 2;grid-row: 1 / 2;" class="cell label">机构分类</div>
                <div style="grid-column: 2 / 3;grid-row: 1 / 2;" class="cell label">人员分类</div>
                <div style="grid-column: 3 / 4;grid-row: 1 / 2;" class="cell label">派遣员工本月人数</div>
                <div style="grid-column: 4 / 5;grid-row: 1 / 2;" class="cell label">外包员工本月人数</div>
                <div style="grid-column: 1 / 2;grid-row: 2 / 5;" class="cell label">总行</div>
                <div style="grid-column: 2 / 3;grid-row: 2 / 3;" class="cell">员工</div>
                <div style="grid-column: 2 / 3;grid-row: 3 / 4;" class="cell">其他人员</div>
                <div style="grid-column: 2 / 3;grid-row: 4 / 5;" class="cell">合计</div>
                <div style="grid-column: 3 / 4;grid-row: 2 / 3;" class="cell" data-type="value">员工</div>
                <div style="grid-column: 3 / 4;grid-row: 3 / 4;" class="cell" data-type="value">其他人员</div>
                <div style="grid-column: 3 / 4;grid-row: 4 / 5;" class="cell" data-type="value">合计</div>
                <div style="grid-column: 4 / 5;grid-row: 2 / 3;" class="cell" data-type="value">员工</div>
                <div style="grid-column: 4 / 5;grid-row: 3 / 4;" class="cell" data-type="value">其他人员</div>
                <div style="grid-column: 4 / 5;grid-row: 4 / 5;" class="cell" data-type="value">合计</div>
                <div style="grid-column: 1 / 2;grid-row: 5 / 6;" class="cell label">总行营业部</div>
                <div style="grid-column: 2 / 3;grid-row: 5 / 6;" class="cell">营业部员工</div>
                <div style="grid-column: 3 / 4;grid-row: 5 / 6;" class="cell" data-type="value">营业部员工</div>
                <div style="grid-column: 4 / 5;grid-row: 5 / 6;" class="cell" data-type="value">营业部员工</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="总行" name="second">
          <div class="layout">
            <div class="item">
              <div class="title">
                <div class="text">正式员工情况</div>
                <div class="download">下载<i class="el-icon-download"></i></div>
              </div>
              <div class="grid-one">
                <div style="grid-column: 1 / 2;grid-row: 1 / 2;" class="cell">机构分类</div>
                <div style="grid-column: 2 / 4;grid-row: 1 / 2;" class="cell">人员分类</div>
                <div style="grid-column: 4 / 5;grid-row: 1 / 2;" class="cell">本月人数</div>
                <div style="grid-column: 1 / 2;grid-row: 2 / 13;" class="cell">总行</div>
                <div style="grid-column: 2 / 3;grid-row: 2 / 7;" class="cell">单列职务</div>
                <div style="grid-column: 3 / 4;grid-row: 2 / 3;" class="cell">行领导</div>
                <div style="grid-column: 3 / 4;grid-row: 3 / 4;" class="cell">行长助理</div>
                <div style="grid-column: 3 / 4;grid-row: 4 / 5;" class="cell">总裁</div>
                <div style="grid-column: 3 / 4;grid-row: 5 / 6;" class="cell">首席官</div>
                <div style="grid-column: 3 / 4;grid-row: 6 / 7;" class="cell">总监</div>
                <div style="grid-column: 4 / 5;grid-row: 2 / 3;" class="cell" data-type="value">行领导</div>
                <div style="grid-column: 4 / 5;grid-row: 3 / 4;" class="cell" data-type="value">行长助理</div>
                <div style="grid-column: 4 / 5;grid-row: 4 / 5;" class="cell" data-type="value">总裁</div>
                <div style="grid-column: 4 / 5;grid-row: 5 / 6;" class="cell" data-type="value">首席官</div>
                <div style="grid-column: 4 / 5;grid-row: 6 / 7;" class="cell" data-type="value">总监</div>
                <div style="grid-column: 2 / 3;grid-row: 7 / 9;" class="cell">管理人员</div>
                <div style="grid-column: 3 / 4;grid-row: 7 / 8;" class="cell">正职</div>
                <div style="grid-column: 3 / 4;grid-row: 8 / 9;" class="cell">副职</div>
                <div style="grid-column: 4 / 5;grid-row: 7 / 8;" class="cell" data-type="value">正职</div>
                <div style="grid-column: 4 / 5;grid-row: 8 / 9;" class="cell" data-type="value">副职</div>
                <div style="grid-column: 2 / 4;grid-row: 9 / 10;" class="cell">专业技术人员(高级经理)</div>
                <div style="grid-column: 2 / 4;grid-row: 10 / 11;" class="cell">员工</div>
                <div style="grid-column: 2 / 4;grid-row: 11 / 12;" class="cell">其他人员</div>
                <div style="grid-column: 2 / 4;grid-row: 12 / 13;" class="cell">合计</div>
                <div style="grid-column: 4 / 5;grid-row: 9 / 10;" class="cell" data-type="value">
                  专业技术人员(高级经理)
                </div>
                <div style="grid-column: 4 / 5;grid-row: 10 / 11;" class="cell" data-type="value">员工</div>
                <div style="grid-column: 4 / 5;grid-row: 11 / 12;" class="cell" data-type="value">其他人员</div>
                <div style="grid-column: 4 / 5;grid-row: 12 / 13;" class="cell" data-type="value">合计</div>
                <div style="grid-column: 1 / 2;grid-row: 13 / 17;" class="cell">总行营业部</div>
                <div style="grid-column: 2 / 3;grid-row: 13 / 15;" class="cell">管理人员</div>
                <div style="grid-column: 3 / 4;grid-row: 13 / 14;" class="cell">正职</div>
                <div style="grid-column: 3 / 4;grid-row: 14 / 15;" class="cell">副职</div>
                <div style="grid-column: 4 / 5;grid-row: 13 / 14;" class="cell" data-type="value">正职</div>
                <div style="grid-column: 4 / 5;grid-row: 14 / 15;" class="cell" data-type="value">副职</div>
                <div style="grid-column: 2 / 4;grid-row: 15 / 16;" class="cell">营业部员工</div>
                <div style="grid-column: 2 / 4;grid-row: 16 / 17;" class="cell">合计</div>
                <div style="grid-column: 4 / 5;grid-row: 15 / 16;" class="cell" data-type="value">营业部员工</div>
                <div style="grid-column: 4 / 5;grid-row: 16 / 17;" class="cell" data-type="value">合计</div>
              </div>
            </div>
            <div class="item">
              <div class="title">
                <div class="text">派遣员工与外包员工情况</div>
                <div class="download">下载<i class="el-icon-download"></i></div>
              </div>
              <div class="grid-two">
                <div style="grid-column: 1 / 2;grid-row: 1 / 2;" class="cell">机构分类</div>
                <div style="grid-column: 2 / 3;grid-row: 1 / 2;" class="cell">人员分类</div>
                <div style="grid-column: 3 / 4;grid-row: 1 / 2;" class="cell">派遣员工本月人数</div>
                <div style="grid-column: 4 / 5;grid-row: 1 / 2;" class="cell">外包员工本月人数</div>
                <div style="grid-column: 1 / 2;grid-row: 2 / 5;" class="cell">总行</div>
                <div style="grid-column: 2 / 3;grid-row: 2 / 3;" class="cell">员工</div>
                <div style="grid-column: 2 / 3;grid-row: 3 / 4;" class="cell">其他人员</div>
                <div style="grid-column: 2 / 3;grid-row: 4 / 5;" class="cell">合计</div>
                <div style="grid-column: 3 / 4;grid-row: 2 / 3;" class="cell" data-type="value">员工</div>
                <div style="grid-column: 3 / 4;grid-row: 3 / 4;" class="cell" data-type="value">其他人员</div>
                <div style="grid-column: 3 / 4;grid-row: 4 / 5;" class="cell" data-type="value">合计</div>
                <div style="grid-column: 4 / 5;grid-row: 2 / 3;" class="cell" data-type="value">员工</div>
                <div style="grid-column: 4 / 5;grid-row: 3 / 4;" class="cell" data-type="value">其他人员</div>
                <div style="grid-column: 4 / 5;grid-row: 4 / 5;" class="cell" data-type="value">合计</div>
                <div style="grid-column: 1 / 2;grid-row: 5 / 6;" class="cell">总行营业部</div>
                <div style="grid-column: 2 / 3;grid-row: 5 / 6;" class="cell">营业部员工</div>
                <div style="grid-column: 3 / 4;grid-row: 5 / 6;" class="cell" data-type="value">营业部员工</div>
                <div style="grid-column: 4 / 5;grid-row: 5 / 6;" class="cell" data-type="value">营业部员工</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style scoped lang="less">
.report {
  width: 100%;
  height: 100%;
  padding: 16px;
  background: #f3f3f3;
  overflow-y: auto;

  .head {
    display: flex;
    gap: 16px;

    .button {
      width: 108px;
      height: 40px;
      border-radius: 4px;
      background: #fdece9;
      color: #cf3b26;
      border: 1px solid #cf3b26;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;
    }

    .active {
      color: #ffffff;
      background: #cf3b26;
    }
  }

  .card {
    background: #ffffff;
    border-radius: 6px;
    padding: 16px;

    .layout {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      padding: 24px;

      .item {
        width: calc(50% - 16px);

        .title {
          width: 100%;
          display: flex;
          align-items: center;

          .text {
            font-weight: 550;
            flex: 1;
          }
        }

        .cell {
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #d7d7d7;
          padding: 8px 0;
        }

        .label {
          background: #fcf8f8;
          color: #716767;
          font-weight: 600;
        }

        .grid-one {
          margin-top: 8px;
          display: grid;
          grid-template-rows: repeat(16, 1fr);
          grid-template-columns: repeat(4, 1fr);
        }

        .grid-two {
          margin-top: 8px;
          display: grid;
          grid-template-rows: repeat(5, 1fr);
          grid-template-columns: repeat(4, 1fr);
        }

      }
    }
  }

  .download {
    color: #cf3b73;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;

    i {
      margin-left: 4px;
      font-size: 16px;
    }
  }
}
</style>